<template>
	<view class="mytab" :class="'_' + (globalConfig.tabbar && globalConfig.tabbar.length)">
		<!-- 底部tabbar -->
		<u-tabbar :value="currentTabIndex" activeColor="#4a4a4a" inactiveColor="#626873">
			<u-tabbar-item v-for="(item, index) in globalConfig.tabbar" :key="index" :text="item.text" 
				:icon="index == currentTabIndex ? item.selectedIconPath : item.iconPath" @click="onChangeTab"
			></u-tabbar-item>
		</u-tabbar>
		<view class="addButton" @click="showMoreMenus = true" v-show="menuConfigs && menuConfigs.menuButtons.length"></view>
		
		<!-- +按钮弹出层 -->
		<u-popup :show="showMoreMenus" mode="bottom" :closeable="true" closeIconPos="bottom" 
			@close="showMoreMenus = false;" overlayOpacity="0" bgColor="transparent">
			<view class="all-screen moreMenusPop" @click="showMoreMenus=false;">
				<view class="menuButtons" v-if="menuConfigs">
					<view class="buttom" v-for="(item, index) in menuConfigs.menuButtons" :key="index" @click.prevent.stop="parseMenuButtonClick(item)">
						<view class="logo" :style="{background: item.color}">
							<image class="icon" :src="getFmtImage(item.icon)" mode=""></image>
						</view>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	import sceneMixins from '@/utils/sceneMixins';
	export default {
		data() {
			return {
				showMoreMenus: false
			}
		},
		mixins: [sceneMixins],
		mounted() {
			uni.hideTabBar();
			var currentRoute = getCurrentPages()[0].route;
			
			this.waitVariable('globalConfig').then(() => {
				console.log(this.globalConfig.tabbar);
				var index = this.globalConfig.tabbar.findIndex(n => {
					return n.pagePath.includes(currentRoute);
				});
				this.changeTab(index);
			});
		},
		computed: {
			...mapState(['currentTabIndex', 'menuConfigs', 'globalConfig'])
		},
		watch: {
			showMoreMenus: function (val) {
				if (val && !this.menuConfigs) {
					this.getSpaceConfig();
				}
			}
		},
		options: { styleIsolation: 'shared' },
		methods: {
			...mapMutations(['changeTab']),
			onChangeTab: function (value) {
				var item = this.globalConfig.tabbar[value];
				this.changeTab(value);
				uni.switchTab({
					url: item.pagePath
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.addButton {
	background: url(../../static/imgs/tabs/+.png);
	width: 104rpx;
	height: 104rpx;
	position: absolute;
	bottom: calc(-56rpx + 50px);
	bottom: calc(-56rpx + 50px + constant(safe-area-inset-bottom));
	bottom: calc(-56rpx + 50px + env(safe-area-inset-bottom));
	z-index: 1;
	background-size: 100% 100%;
	left: calc(375rpx - 52rpx);
	
}
.mytab {
	position: fixed;
	bottom: 0;
	z-index: 10;
}
.mytab /deep/ .u-tabbar__content {
	border-top: none;
	box-shadow: 0 3px 5px black;
}
.mytab._4 {
	/deep/ .u-tabbar__content__item-wrapper {
		.u-tabbar-item:nth-child(2) {
			margin-right: 5%;
		}
		.u-tabbar-item:nth-child(3) {
			margin-left: 5%;
		}
	}
}
.mytab._2 {
	/deep/ .u-tabbar__content__item-wrapper {
		.u-tabbar-item:nth-child(1) {
			margin-right: 10%;
		}
		.u-tabbar-item:nth-child(2) {
			margin-left: 10%;
		}
	}
}
.mytab /deep/ .u-tabbar__content__item-wrapper {
	.u-tabbar-item__icon {
		height: 42rpx;
	}
	// .u-tabbar-item:nth-child(1) {
	// 	.u-icon__img {
	// 		width: 40rpx !important;
	// 		height: 39rpx !important;
	// 	}
	// }
	// .u-tabbar-item:nth-child(2) {
	// 	margin-right: 5%;
	// 	.u-icon__img {
	// 		width: 42rpx !important;
	// 		height: 41rpx !important;
	// 	}
	// }
	// .u-tabbar-item:nth-child(3) {
	// 	margin-left: 5%;
	// 	.u-icon__img {
	// 		width: 42rpx !important;
	// 		height: 34rpx !important;
	// 	}
	// }
	// .u-tabbar-item:nth-child(4) {
	// 	.u-icon__img {
	// 		width: 40rpx !important;
	// 		height: 39rpx !important;
	// 	}
	// }
}



.moreMenusPop {
	background: #ffffffe6; 
	.menuButtons {
    display: flex;
    flex-wrap: wrap;
    margin: 30rpx;
	width: calc(100% - 60rpx);
    position: absolute;
    bottom: 80rpx;
		justify-content: space-around;
		.buttom {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			.name {
				font-size: 26rpx;
				// white-space: nowrap;
				text-align: center;
				@include overfloewEllipsis(2);
			}
			.logo {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10rpx;
				.icon {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
}

 
</style>
